import { defineComponent, reactive, ref, computed } from "vue";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import styles from "./add.module.less";
import { message } from "ant-design-vue";
import LPopup from "@/components/public/lPopup/lPopup";
import { useStore as useUserStore } from "@/store/user";
import {$getAreaList,$getForthArea} from "@/api/common/common";
export default defineComponent({
  props: {
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ["cancel", "confirm"],
  setup(props, { emit, expose }) {
    const userStore = useUserStore();
    const state = reactive({
      id: null,
      treeData: [
        {
          label: "出单机构",
          value: 1,
        },
        {
          label: "推广机构",
          value: 2,
        },
      ],
      form: {
        pid: userStore.isSuperAdmin ? 0 : userStore.channel_id,
        name: null,
        province_id:933,
        city_id:userStore.city_id,
        area_id:null,
        street_id:null,
        status: 1,
      },
      // rules: {
      //   name: [{ required: true, message: "请输入名称" }],
      //   abbreviation_name: [{ required: true, message: "请输入简称" }],
      //   license: [{ required: true, message: "请输入许可证代码" }],
      //   affairsnum: [{ required: true, message: "请输入统一信用代码证"}],
      //   num: [{ required: true, message: "请输入机构代码"}],
      //   type:[{ required: true, message: "请选择公司类型"}],
      //   organ_top_id:[{ required: true, message: "请选择机构类型"}],
      // },
      cityID:933,
      cityArray:[],
      areaArray:[],
      streetArray:[],
    } as any);
    // 是否为编辑
    const isEdit = computed(() => {
      return !!state.id;
    });
    const cancelHandler = () => {
      addPopupRef.value.close();
    };
    const confirmHandler = (e: any) => {
      if (isEdit.value) {
         e.form.id = state.id;
        props.service.edit(e.form).then((res:any)=>{
          message.success("编辑二级渠道成功");
          emit("confirm");
        }).finally(()=>{
          e.done();
        })
      } else {
        props.service
          .add(e.form)
          .then((res: any) => {
            message.success("添加二级渠道成功,默认初始密码123456");
            emit("confirm");
          })
          .finally(() => {
            e.done();
          });
      }
    };
       //市区县
       const city = ()=>{
        $getAreaList({}).then((res:any)=>{
              res.data.forEach((item:any)=>{
                if(item.name === "浙江省")
                {
                  state.cityArray = item.child.map((itemX:any)=>{
                    return {
                         label:itemX.name,
                         value:itemX.id,
                         area:itemX.child.map((itemY:any)=>{
                             return {
                                label:itemY.name,
                                value:itemY.id,
                             }
                         })
                    }
                  })
                }
            })
        })
      }
      city();
    const addPopupRef = ref(null as any);
    const open = (e: any) => {
      state.form.name =  null;
      state.form.city_id = null;
      state.form.area_id=null;
      state.form.street_id=null;
      state.form.pid = userStore.isSuperAdmin ? 0 : userStore.channel_id;
      state.areaArray = [];
      state.streetArray = [];
      state.form.status = 1;
      if (e?.id) {
        state.id = e.id;
        props.service.detail({ id: state.id }).then((res: any) => {
          state.form.pid = res?.data?.pid;
          state.form.name = res?.data?.username || null;
          state.form.city_id = res?.data?.city_id || null;
          state.form.area_id = res?.data?.area_id || null;
          state.form.street_id = res?.data?.street_id || null;
          state.form.status = res?.data?.status;
          if(state.form.city_id)
          {
            state.cityArray.forEach((item:any)=>{
                if(item.value ===  state.form.city_id)
                {
                  state.areaArray = item.area;
                  return;
                }
            })
            if(state.form.area_id)
            {
              $getForthArea({area_id:state.form.area_id}).then((res:any)=>{
                state.streetArray = res.data.map((item:any)=>{
                  return {
                    label: item.name,
                    value: item.id,
                  };
                })
               })
            }
          }
        });
      }
      else
      {
        state.form.city_id = userStore.city_id;
        state.cityArray.forEach((item:any)=>{
          if(item.value ==  state.form.city_id)
          {
            state.areaArray = item.area;
            return;
          }
         })
      }
      addPopupRef.value.open();
    };
    const close = () => {
      addPopupRef.value.close();
    };
    expose({
      open,
      close,
    });
    const Components = () => (
      <LPopup title={isEdit.value ? "编辑渠道" : "添加渠道"} ref={addPopupRef}>
        <div class={styles.firstLevelChannelAdd}>
          <div class={styles.firstLevelChannelBody}>
            <LForm
              btns={["cancel", "confirm"]}
              v-model={state.form}
              rules={state.rules}
              onCancel={() => {
                cancelHandler();
              }}
              onConfirm={(e: any) => {
                confirmHandler(e);
              }}
            >
              <LFormItem label="用户名" prop="name">
                <a-input
                  v-model:value={state.form.name}
                  placeholder="用于账号登陆"
                ></a-input>
              </LFormItem>
              <LFormItem label="所在市" prop="">
                <a-select
                  v-model:value={state.form.city_id}
                   style={{width:"100%"}}
                   options={state.cityArray}
                   disabled
                  placeholder="请选择所在市"
                ></a-select>
              </LFormItem>
              <LFormItem label="所在区县" prop="">
                <a-select
                  v-model:value={state.form.area_id}
                  style={{width:"100%"}}
                   options={state.areaArray}
                  placeholder="请选择所在区县"
                  onSelect={(value:any)=>{
                    $getForthArea({area_id:value}).then((res:any)=>{
                        state.streetArray = res.data.map((item:any)=>{
                          return {
                            label: item.name,
                            value: item.id,
                          };
                        })
                    })
                  }}
                ></a-select>
              </LFormItem>
              {/* <LFormItem label="所在乡镇/街道" prop="">
                <a-select
                  v-model:value={state.form.street_id}
                  style={{width:"100%"}}
                  options={state.streetArray}
                  placeholder="请选择所在乡镇街道"
                ></a-select>
              </LFormItem> */}
              <LFormItem label="状态" prop="">
                <a-radio-group
                  v-model:value={state.form.status}
                  name="radioGroup"
                >
                  <a-radio value={1}>启用</a-radio>
                  <a-radio value={0}>禁用</a-radio>
                </a-radio-group>
              </LFormItem>
            </LForm>
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});
